<template>
	<!-- 加载中 -->
	<uni-load-more :status="isLoadingStatus" v-if="isLoading" /> <!-- 加载状态组件 -->
	<view v-else class="bookshelf-container">
		<!-- 标题栏 -->
		<view class="bookshelf-header">
			<view class="view-toggle-btn" @click="handleToggleView">{{ isGrid ? '列表' : '宫格' }}</view>
		</view>

		<!-- 宫格模式 -->
		<scroll-view scroll-y class="bookshelf-scrollview" v-if="!isGrid" show-scrollbar="false">
			<view class="bookshelf-grid">
				<navigator v-for="book in bookList" :key="book.id" class="book-item"
					:url="`/pages/book/index?bookId=${book.id}`">
					<image class="book-cover" :src="`${baseURL}${book.image}`" mode="aspectFill" /> <!-- 书籍封面 -->
					<view class="book-info">
						<text class="book-title">{{ book.name }}</text> <!-- 书籍标题 -->
						<text class="book-update">更新至{{ book.totalChapters }}章</text> <!-- 更新信息 -->
					</view>
				</navigator>
			</view>
		</scroll-view>

		<!-- 列表模式 -->
		<scroll-view scroll-y class="bookshelf-scrollview" v-else show-scrollbar="false">
			<view class="bookshelf-list">
				<navigator v-for="book in bookList" :key="book.id" class="book-item"
					:url="`/pages/book/index?bookId=${book.id}`">
					<!-- 书籍封面 -->
					<image class="book-cover" :src="`${baseURL}${book.image}`" mode="aspectFill" />

					<!-- 书籍信息 -->
					<view class="book-info">
						<!-- 标题行 -->
						<view class="book-title-row">
							<text class="book-title">书名：{{ book.name }}</text> <!-- 书籍标题 -->
						</view>
						<!-- 更新信息 -->
						<view class="book-update-info">
							<text class="book-author">作者：{{ book.author }}</text> <!-- 作者信息 -->
						</view>
						<view class="book-update-info">
							<text class="book-unread-chapters">未读 {{ book.unreadChapter }} 章</text> <!-- 未读章节数 -->
						</view>
						<!-- 最新章节 -->
						<view class="book-latest-chapter">
							<text>最新章节：{{ book.latestChapter }}</text> <!-- 最新章节信息 -->
						</view>
					</view>
				</navigator>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { listBookShelfAPI } from '@/services/bookshelf'; // 导入书架API
	import { BookItem } from '../../types/book'; // 导入书籍类型
	import { ref } from 'vue'; // 导入Vue响应式工具
	import { baseURL } from '@/utils/config'; // 导入基础URL配置
	import { onShow } from '@dcloudio/uni-app'; // 导入生命周期钩子

	/**
	 * 加载状态
	 */
	const isLoading = ref(false);

	/**
	 * 查询状态
	 */
	const isLoadingStatus = ref('more');

	/**
	 * 定义分类标签常量
	 */
	const bookTypeList = ref(['全部', '阅读', '听书']);

	/**
	 * 定义选中的标签索引
	 */
	const selectedTypeIndex = ref(0);

	/**
	 * 书籍列表
	 */
	const bookList = ref<BookItem[]>([]);

	/**
	 * 用于控制宫格和列表的切换状态
	 * true: 列表模式, false: 宫格模式
	 */
	const isGrid = ref(true);

	/**
	 * 切换显示模式的处理函数
	 */
	const handleToggleView = () => {
		isGrid.value = !isGrid.value;
	};

	/**
	 * 页面显示时调用的生命周期钩子
	 * 初始化加载书架数据
	 */
	onShow(async () => {
		isLoading.value = true;
		isLoadingStatus.value = 'loading';
		selectedTypeIndex.value = 0;
		await queryBookShelfData();
		setTimeout(() => {
			isLoading.value = false;
			isLoadingStatus.value = 'more';
		}, 100);
	});

	/**
	 * 查询书架数据的方法
	 */
	const queryBookShelfData = async () => {
		bookList.value = (await listBookShelfAPI()).data as BookItem[];
	};

	/**
	 * 刷新数据的处理函数
	 */
	const handleRefresh = async () => {
		await queryBookShelfData();
	};
</script>

<style lang="scss">
	// 主容器样式
	.bookshelf-container {
		height: 100vh;
		width: 100%;
		display: flex;
		flex-direction: column;
		overflow-y: hidden;


		// 标题栏样式
		.bookshelf-header {
			z-index: 40;
			height: 30px;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding-right: 40px;
			position: fixed;
			background-color: #fff;
			width: 100vw;

			// 视图切换按钮样式
			.view-toggle-btn {
				position: relative;
				margin-left: 20rpx;
				padding: 10rpx 20rpx;
			}
		}

		// 滚动视图样式
		.bookshelf-scrollview {
			margin-top: 35px;
			flex: 1;
			height: calc(100vh - 30px);
			box-sizing: border-box;
			background-color: #f5f5f5;

			// 去除滚动条
			&::-webkit-scrollbar {
				display: none;
				width: 0;
				height: 0;
				color: transparent;
				background: transparent;
			}

			// 列表模式样式
			.bookshelf-list {
				display: grid;
				grid-template-columns: repeat(1, 1fr);
				gap: 10px;
				padding: 10px;
				box-sizing: border-box;
				overflow: hidden;

				// 书籍项样式
				.book-item {
					display: flex;
					margin-bottom: 30rpx;
					padding: 20rpx;
					background: #fff;
					border-radius: 16rpx;
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

					// 书籍封面样式
					.book-cover {
						width: 180rpx;
						height: 240rpx;
						border-radius: 8rpx;
						margin-right: 30rpx;
					}

					// 书籍信息样式
					.book-info {
						flex: 1;

						// 标题行样式
						.book-title-row {
							display: flex;
							align-items: center;
							margin-bottom: 20rpx;

							// 书籍标题样式
							.book-title {
								font-size: 32rpx;
								font-weight: bold;
								margin-right: 20rpx;
							}

							// 作者信息样式
							.book-author {
								font-size: 24rpx;
								color: #666;
							}
						}

						// 更新信息样式
						.book-update-info {
							display: flex;
							align-items: center;
							margin-bottom: 15rpx;

							// 未读章节样式
							.book-unread-chapters {
								font-size: 26rpx;
								color: #e4393c;
								margin-right: 30rpx;
							}

							// 更新时间样式
							.book-update-time {
								font-size: 24rpx;
								color: #888;
							}
						}

						// 最新章节样式
						.book-latest-chapter {
							font-size: 26rpx;
							color: #333;

							// 章节计数样式
							.book-chapter-count {
								color: #666;
								margin-left: 15rpx;
							}
						}
					}
				}
			}

			// 宫格模式样式
			.bookshelf-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 10px;
				padding: 10px;
				box-sizing: border-box;
				overflow: hidden;

				// 书籍项样式
				.book-item {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					min-height: 200px;

					// 书籍封面样式
					.book-cover {
						width: 100%;
						height: 140px;
						border-radius: 8rpx;
						margin-bottom: 15rpx;
						border: 1px solid #ccc;
					}

					// 书籍信息样式
					.book-info {
						flex: 1;
						text-align: center;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: flex-start;

						// 书籍标题样式
						.book-title {
							font-size: 26rpx;
							color: #030303;
						}

						// 更新信息样式
						.book-update {
							color: #ababab;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
</style>